<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>canvas生成验证码</title>
</head>

<body>
    <canvas id='selector'></canvas>

    <script>
        //构造多个函数，在不同地方进行调用，
        //selector: 选择器, 调用函数传参是需要加上前边的.或者#,
        //eg: let yzm = YZM('#canvas', 120, 40) * /
        function YZM(selector, w, h) {
            //随机数的生成
            function rn(min, max) {
                /*Math.random()给我们返回一个在0-1范围内的随机数,我们想要一个任意随机数。
                可以通过Math.random()的结果乘以任意数值区间得到它*/
                return parseInt(Math.random() * (max - min) + min)

            }
            //随机生成颜色的函数
            function rc(min, max) {
                var r = rn(min, max);
                var g = rn(min, max);
                var b = rn(min, max);
                return `rgb(${r},${g},${b})`

            }

            var w = w;
            var h = h;
            var canvas = document.getElementById('selector');
            //获得 2d 上下文对象
            var ctx = canvas.getContext('2d');
            ctx.fillRect(0, 0, w, h) //绘制一个矩形
            ctx.fillStyle = rc(280, 400) //背景填充颜色

            //随机字符串
            var pool = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789'
            var result = ''
            for (var i = 0; i < 4; i++) {
                //随机的取出字母或数字
                var c = pool[rn(0, pool.length)]
                    //随机出字体的大小
                var fs = rn(18, 40)
                    //随机数字字母的旋转
                var deg = rn(-30, 30)
                ctx.font = fs + 'px Simhei'
                ctx.textBaseline = 'top'
                    //设置字体的填充颜色
                ctx.fillStyle = rc(80, 150)
                    //对前边的统一样式进行保存
                ctx.save()
                    //位移(x，y)，y值不变，相当于将这四个随机数从左至右平铺
                ctx.translate(30 * i + 15, 15)
                    //旋转，圆周率
                ctx.rotate(deg * Math.PI / 180)
                    //将随机数填充在页面上
                ctx.fillText(c, -10, -10)
                    //恢复，每次旋转都恢复一下，对上一次不会产生影响，下一个随机数从头开始
                ctx.restore()
                result += c
            }

            // 随机生成干扰线（5条）
            for (var i = 0; i < 5; i++) {
                ctx.beginPath() //创造一条Path
                ctx.moveTo(rn(0, w), rn(0, h)) //重新的起点
                ctx.lineTo(rn(0, w), rn(0, h)) //移后位置的点
                ctx.strokeStyle = rc(188, 230) //着色
                ctx.closePath() //关闭路线
                ctx.stroke() //绘制

            }
            //随机产生四十个小圆点
            for (var i = 0; i < 40; i++) {
                ctx.beginPath()

                //arc(x, y, r, startAngle, endAngle, anticlockwise):以(x, y)为圆心，以r为半径，从 startAngle弧度开始到endAngle弧度结束。anticlosewise是布尔值，true表示逆时针，false表示顺时针。(默认是顺时针)
                ctx.arc(rn(0, w), rn(0, h), 1, 0, 2 * Math.PI)
                ctx.closePath() //关闭路线
                ctx.fillStyle = rc(150, 200) //填充的颜色
                ctx.fill() //进行填充
            }
            return result
        }

        let yzm = YZM('#canvas', 120, 40)
        console.log(yzm);

        //点击图片，更新验证码
        var canvas = document.getElementById('selector');
        canvas.onclick = function() {
            YZM('#canvas ', 120, 40)
        }
    </script>



</body>

</html>